<template>
	<view class="container">
		<!-- 我的 -->
		<u-navbar title="我的" leftIconSize='0' bgColor="transparent" titleStyle="color:'#000000'">
		</u-navbar>
		<view class="user-info">
			<u-avatar :src="avatorSrc" :size="'124rpx'" @click="goto('/minepkg/user_info/user_info')"></u-avatar>
			<view class="info-box">
				<text class="user-name">{{userInfo.userName}}</text>
				<text class="user-id">{{userInfo.userId}}</text>
			</view>
		</view>

		<view class="user-feature-list">
			<view class="user-feature-list-item" @click="goto('/minepkg/PM/PM')">
				<image src="/static/mine_icons/pro.png" class="icon"></image>
				<text class="user-service-name">项目管理</text>
				<image src="/static/mine_icons/left.png" class="left-icon"></image>
			</view>
			<view class="user-feature-list-item" @click="goto('/minepkg/customer_service/customer_service')">
				<image src="/static/mine_icons/service.png" class="icon"></image>
				<text class="user-service-name">客服中心</text>
				<image src="/static/mine_icons/left.png" class="left-icon"></image>
			</view>
			<!-- <view class="user-feature-list-item" @click="goto('/minepkg/mine_service/mine_service')">
				<image src="/static/mine_icons/service.png" class="icon"></image>
				<text class="user-service-name">客服中心</text>
				<image src="/static/mine_icons/left.png" class="left-icon"></image>
			</view> -->
		</view>
		<view class="card">
			<follow-me></follow-me>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.checkFeatures()
		},
		onShow() {
			this.getUserInfo()
		},
		data() {
			return {
				userInfo: {
					userName: '',
					userId: ''
				},
				avatorSrc: '',
				roleId: ''
			};
		},
		methods: {
			checkFeatures() {
				const role = uni.getStorageSync('roleId')
				if (role == '1') {
					console.log("succeess")
				}
			},
			getUserInfo() {
				this.avatorSrc = uni.$http.baseURL + '/file/download?fileId=' + uni.getStorageSync('avator')
				this.userInfo.userName = uni.getStorageSync('userName')
				this.userInfo.userId = uni.getStorageSync('userId')
			},
			goto(url) {
				console.log("即将进入：" + url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 0;

		&::before {
			content: '';
			display: box;
			width: 100%;
			background-image: url('');
			height: 548rpx;
			position: absolute;
			border-radius: 0 0 70% 70%;
			z-index: -1;
		}
	}

	.user-info {
		display: flex;
		margin-top: 180rpx;
		margin-left: 28rpx;
		flex-direction: row;

		.info-box {
			display: flex;
			flex-direction: column;
			margin-top: 26rpx;
			margin-left: 21rpx;
			text-align: left;
			color: #FFFFFF;
			font-weight: 500;

			.user-name {
				font-size: 32rpx;
			}

			.user-id {
				width: 400rpx;
				overflow: hidden;
				/* #ifndef APP-NVUE */
				white-space: nowrap;
				text-overflow: ellipsis;
				/* #endif */
				/* #ifdef APP-NVUE */
				lines: 1;
				text-overflow: ellipsis;
				/* #endif */

			}
		}

	}

	.user-feature-list {
		background: #FFFFFF;
		border: 5rpx solid #EBEEF5;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		margin: 44rpx 30rpx 0 30rpx;

		.user-feature-list-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid #efefef;

			.icon {
				margin-left: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.user-service-name {
				margin-left: 35rpx;
			}

			.left-icon {
				margin-left: 400rpx;
				height: 28rpx;
				width: 16rpx;
			}
		}
	}

	.card {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
</style>
